<template>
	<!-- 审批流程 -->
	<div class="process">
		<div class="bottom">
			<div class="base-title"><span></span>审批进度</div>
			<div v-for="(item,index) in approveList" :key="index" style="position: relative;">
				<div class="pace">
					<div :class="['code', { speed:item.status == 'pass' }]"></div>
					<div>您的申请已提交至{{ item.companyName }}-{{ item.deptName }}</div>
				</div>
				<div class="pace">经办人：{{ item.approvePersonName }}</div>
				<div class="pace">审批状态：{{ judgeStatus(item.status) }}</div>
				<div class="pace">审批说明：{{ item.message||'暂无' }}</div>
				<div class="pace" v-if="item.updateTime">审批时间：{{ item.updateTime|datefmt('YYYY-MM-DD HH:mm:ss')}}</div>
				<div class="pace" v-else>审批时间：{{ '暂未审批' }}</div>
				<div
					:class="[{line:index!=approveList.length-1 && approveList.length>1},{ speed:item.status == 'pass' }]">
				</div>
			</div>
		    </div>
	    </div>

</template>

<script>
	export default {
		props: {
			approveList: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			judgeStatus(val) {
				if (val == 'wait') {
					return '等待审批'
				} else if (val == 'pass') {
					return '审批通过'
				} else if (val == 'refuse') {
					return '审批拒绝'
				} else if (val == 'waitBefore') {
					return '等待前者审批'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 标记点-进度条的样式
	.bottom {
		position: relative;
		background-color: #ffffff;
		padding: 12px 17px;
		color: #333333;
		font-size: 13px;
		font-weight: 500;
		padding-bottom: 80px;

		.bottom-speed {
			height: 20px;
			font-weight: 800;
		}

		// 标记点-进度条的样式
		.pace {
			display: flex;
			align-items: center;
			text-indent: 20px;
			height: 30px;
			z-index: -1;
		}

		.code {
			width: 10px;
			height: 10px;
			background: #767676;
			border-radius: 50%;
			position: absolute;
			z-index: 10;
		}

		.speed {
			background-color: #4ab4ff !important;
		}

		.line {
			top: 16px;
			left: 4px;
			width: 2px;
			height: 148px;
			background-color: #979797;
			position: absolute;
			z-index: 0;
		}

	}
	.base-title {
		font-size: 15px;
		display: flex;
		align-items: center;
		padding: 8px 0;
		font-weight: bolder;
	
		span {
			width: 4px;
			height: 10px;
			background: #36ACFE;
			border-radius: 2px;
			display: block;
			margin-right: 5px;
		}
	}

</style>
